import React from 'react';
import {Message} from 'antd';
import {APPLY_VOL} from '../../constants/actTypes';
import {REG} from '../../config';
/**
 * 加载公共组件
 * */
import MainSection from '../../components/MainSection/MainSection';


/**
 * 加载样式或图片文件
 * */
import './sass/applyVol.scss';


class ApplyVol extends React.Component {
    static contextTypes = {
        router: React.PropTypes.object.isRequired
    };
    constructor(props) {
        super(props);
        this.handleNameInput = this.handleNameInput.bind(this);
        this.handlePhoneInput = this.handlePhoneInput.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.state = {
            name: '',
            phone: '',
            submitFlag: false
        };
    }

    handleNameInput(e){
        this.setState({name:e.target.value});
    }
    handlePhoneInput(e){
        this.setState({phone:e.target.value});
    }
    handleSubmit(){
        const {actions,params} = this.props;
        let _this = this;
        let id = params.id;
        let name = this.state.name;
        let phone = this.state.phone;
        if (!REG.phone.rule.test(phone)) {
            Message.info(REG.phone.errMsg);
            return false;
        }
        actions.applyVol(id,name,phone).then((res)=>{
            if (res.type === APPLY_VOL) {
                if(res.response.code === 20000){
                    Message.info("报名成功");
                    setTimeout(()=>{
                        _this.context.router.goBack()
                    },1000);
                }else{
                    Message.info(res.response.message);
                }
            }
        })
    }

    render() {
        const {actions, user, home } = this.props;
        let submitFlag = this.state.name && this.state.phone;
        return (
            <MainSection className="apply-vol" title="报名志愿者">
                <div className="form">
                    <div className="input-wrap">
                        <label htmlFor="name">姓名</label>
                        <input id="name" type="text" placeholder="请输入您的姓名" onChange={this.handleNameInput}/>
                    </div>
                    <div className="input-wrap">
                        <label htmlFor="phone">电话</label>
                        <input id="phone" type="text" placeholder="请输入您的电话号码" onChange={this.handlePhoneInput}/>
                    </div>
                </div>
                
                <button className={"confirm-btn " + (submitFlag ? "" : "disabled")}
                        onClick={submitFlag ? this.handleSubmit : null}>确定</button>
            </MainSection>
        );
    }
}

export default ApplyVol;